<template>
  <div>
   <!-- 默认插槽:
    1.在子组件中需要自定义的地方使用 <slot></slot>占位  
    2.在父组件中使用子组件时，开始标签中间传入要自定义的结构

    好处:让组件变得更灵活 

    具名插槽:
    1.在slot上使用name来区分不同的插槽
    2.传入时使用<template></template>包裹主要传入的结构，使用
    v-slot:可以使用 # 来代替  -->

     <!-- 作用域插槽: 
     1.先在slot上绑定属性
    2.在父组件中使用插槽时，template上通过v-solt：插槽名="变量名"来接收数据 -->

  <MyDialog>
     <template #header>
      <h3>你是谁啊</h3>
      </template>
       <!-- # 是 v-slot:的缩写  -->
      <template #content>  
      <h1>你是狗</h1>
      <div>住在山里针不戳</div>
      </template>
    </MyDialog>
    <MyDialog>
      <template #header>
      <h3>我你爹</h3>
      </template>

      <template #content> 
       <h1>你是猪</h1>
       <div>住在山洞里针不戳</div>
      </template>
      <!-- 2.在父组件中使用插槽时，template上通过v-slot:插槽名="变量名"
      业内很多人习惯叫scope 变量名
      <template #bottom="变量名">
        obj 变量只能在template中使用，超出这个范围就无法使用了，所以叫作用域变量 -->
      <template #bottom="obj">
        <!-- 确定按钮和取消按钮的值从子组件传递过来  -->
        <button>{{obj.yes}}</button>
        <button>{{obj.no}}</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog'
export default {
 components:{
     MyDialog
 },
  data() {
    return {
      
    };
  },

};
</script>

<style lang="scss" scoped>

</style>